<script setup>
import {onMounted, ref} from "vue";
import axios from "axios";
import {ElMessage} from "element-plus";
import {useRoute, useRouter} from "vue-router";
const router = useRouter()
const route = useRoute()
const key = ref("")

const search = () => {

  // 搜索的关键字不能为空
  if (key.value.trim() === '') {
    ElMessage.error('搜索的关键字不能为空')
    return
  }

  // 为了避免刷新列表消失 把搜索的值放到路径中
  if (route.path === '/search/album') {
    router.push(`/search/album?key=${key.value}`)
  } else {
    router.push(`/search/music?key=${key.value}`)
  }

}

onMounted(() => {
  key.value = route.query.key
})
function gotoMusic() {
  if (key.value == null || key.value === '') return
  router.push('/search/music?key=' + key.value)
}
function gotoAlbum() {
  if (key.value == null || key.value === '') return
  router.push('/search/album?key=' + key.value)
}
</script>

<template>
  <div class="container">
    <div class="search-container">
      <div class="search-wrap">
        <input placeholder="搜索音乐、歌手、专辑" v-model="key" class="search">

        <Search @click="search()" style="cursor: pointer;position: absolute;right: 10px;top: 15px;width: 20px;color: #8c8c8c;" />
      </div>
    </div>



    <div class="items">
      <span @click="gotoMusic()" :class="{active: $route.path === '/search/music'}">单曲</span>
      <span @click="gotoAlbum()" :class="{active: $route.path === '/search/album'}">专辑</span>
    </div>


    <div class="content-container">
      <router-view />
    </div>

    <div v-if="route.path === '/search'">
      <h1 style="font-size: 45px;margin-top: 50px">请您输入搜索关键词</h1>
      <h1 style="font-size: 45px">方可以进行搜索信息列表的显示</h1>
    </div>

  </div>

</template>

<style scoped>
* {
  color: #333;
}
.search-container {
  //background-color: #eaa470;
  background: url("/src/assets/img/search-bg.png");
  background-size: contain;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding-top: 80px;
  height: 180px;
}
.search-wrap {
  background-color: white;
  height: 50px;
  padding-left: 15px;
  padding-right: 70px;
  position: relative;
  border-radius: 3px;
}
.search {
  border: 0;
  outline: none;
  width: 554px;
  height: 50px;
  padding: 0;
}
h1 {
  text-align: center;
  font-family: 微軟正黑體;
  font-size: 32px;
  cursor: default;
}
.container {
  //background-color: #ffffff;
  //height: 100vh;
  box-sizing: border-box;
}


.items {
  color: white;
  height: 57px;
  padding: 0 calc(50vw - 600px);

}
.items>span {
  line-height: 57px;
  margin-right: 40px;
  cursor: pointer;
}
.items>span:hover {
  color: #e4836f;
}
.active {
  color: #e4836f;
}
.content-container {
  padding: 30px calc(50vw - 600px) 0;
}
</style>
